<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>S.Anim Pause/Resume Demo</title>
</head>
<body>

<div style="width: 100px;height: 100px;border: 1px solid red;" id="t">

</div>

<button id="start">start</button>
<button id="stop">stop</button>
<button id="pause">pause</button>
<button id="resume">resume</button>

<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/anim/config.js"></script>
<script>
    KISSY.use("node", function (S) {
        var $ = S.all, startTime,
                startPause = 0,
                pauseTime = 0,
                endTime;

        var t = $('#t');
        check();
        $("#start").on("click", function () {
            startTime = S.now();
            $("#start").prop("disabled", true);
            t.animate({
                width:10,
                height:10
            }, {
                duration:5,
                complete:function () {
                    $("#start").prop("disabled", false);
                    alert(S.now() - startTime - pauseTime);
                    t.css({
                        width:100,
                        height:100
                    });
                    S.later(check, 0);
                }
            });
            check();
        });

        $("#stop").on("click", function () {
            $("#start").prop("disabled", false);
            t.stop();
            check();
        });

        $("#resume").on("click", function () {
            pauseTime = S.now() - startPause;
            t.resume();
            check();
        });

        $("#pause").on("click", function () {
            startPause = S.now();
            t.pause();
            check();
        });

        function check() {
            $("#resume").prop("disabled", !t.isPaused());
            $("#pause").prop("disabled", !t.isRunning());
        }
    });
</script>
</body>
</html>